<template>
    <div class="container">
        <div class="nav"> 
            <div @click="toPage('/index')">首页</div>
            <div @click="toPage('/article')">文章</div>
            <div @click="toPage('/about')">关于</div>
        </div>
        <div class="content">
            <router-view></router-view>  
        </div>
    </div>
</template>

<script setup lang="ts">
import type { AxiosInstance } from 'axios'
import { ref, reactive, inject, onMounted } from 'vue'
import { useRouter,useRoute, type Router, type RouteLocationNormalizedLoaded } from 'vue-router'
import type { PageParams } from '@/types/params'

//菜单与二级路由
let menus = [
        {name: '首页', href: '/index'},
        {name: '文章', href: '/article'},
        {name: '关于', href: '/about'},
    ]
    
let router = useRouter()

onMounted(() => {

})

const axios = inject<AxiosInstance>('axios')

async function queryArticleList(pageParams: PageParams) {
    const res = await axios?.get('/api/article/list')
    console.log(res)
}

function toPage(url:string){
      if(url === 'logout'){
        router.push('/login')
      }else{
        router.push(url)
      }

     
    }

</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    margin: 0 auto;
}

.nav {
    display: flex;  //弹性布局
    justify-content: center; //水平居中
    gap: 30px; //gap指定flex布局子元素之间的距离
    font-size: 100px;
    padding-top: 20px;
    color: #67646a;
    div {
        cursor: pointer;
        margin-right: 15px;
        &:hover {
            color: #f60;
        }
    }
}

</style>